import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import storage from '../utils/storage'
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        redirect: '/welcome',//重定向
        meta: {
            title: '首页'
        },
        children: [
            {
                path: 'welcome',
                name: 'Welcome',
                meta: {
                    title: '欢迎'
                },
                component: () => import('../views/Welcome.vue')
            },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        meta: {
            title: '登录'
        },
        component: () => import('../views/Login.vue')
    },
    {
        path: '/404',
        name: '404',
        meta: {
            title: '404'
        },
        component: () => import('../views/404.vue')
    },
]

// 异步请求你的(admin alex jack) 地址
// 数组拼接 => 异步路由拼接
// 总结：后台管理系统的路由
// 是由 固定路由 + 异步路由 拼接成最终的完整路由




const router = createRouter({
    history: createWebHashHistory(),
    routes
})

// 如何新增一个路由对象到routes中 路由拼接的基本方式
// router.addRoute("home", {
//     name: 'user',
//     path: '/system/user',
//     meta: {
//         title: "title"
//     },
//     component: () => import('../views/User.vue')
// })


import api from '../api'

// 建立异步路由解析规则
const gnearateRoute = (menuList) => {
    let arr = []
    // 通过递归解析二级菜单，并形成一个对象
    const deepList = (list) => {
        while (list.length) {
            let item = list.pop()
            // item 一级菜单没有action 二级菜单有action
            if (item.action) {
                // 二级
                arr.push({
                    path: item.path,
                    name: item.component,
                    meta: {
                        title: item.menuName
                    }
                })
            }
            if (!item.action && item.children) {
                // 一级
                deepList(item.children)
            }
        }
    }
    deepList(menuList)
    return arr
}

// 获取异步路由
const asyncLoadRoute = async () => {
    let userInfo = storage.getItem('userInfo') || {}
    if (userInfo.token) {
        // 权限菜单不要从缓存改
        let { menuList } = await api.getPermissionList()
        // 新增的异步路由数组
        let asyncRoutes = gnearateRoute(menuList)
        // 只是完成的2/3 缺少componet属性
        // 属于文件引入，不是依靠数据请求，所以没有必要放在递归算法中处理
        asyncRoutes.map(ele => {
            const modules = import.meta.glob("../views/*.vue")
            // 获取当前路径下的所有vue文件后缀
            let url = `../views/${ele.name}.vue`
            ele.component = modules[url]

            // 循环的方式，把没有异步路由的对象addRoute() 放到router规则
            router.addRoute('home', ele)
        })
    }
}
asyncLoadRoute()



// routes 登录完毕 routes是一个完整权限的数组
const checkPermission = (path) => {
    // 判断是否有权限进入
    // 1.通过router.getRoutes() 获取用户权限路由
    const routes = router.getRoutes()
    // 当用户跳转的时候一定触发checkPermission
    // 如果有长度说明用户有权限
    let permis = routes.filter(ele => ele.path == path).length
    return permis ? true : false
}

router.beforeEach(async (to, from, next) => {
    // 判断用户访问的是固定路由还是异步路由
    if (to.name) {
        // 固定路由
        // 修改标题
        document.title = to.meta.title
        next()
    } else {
        // 异步路由
        // 判断用户访问的是不是规则里面的路由
        await asyncLoadRoute()
        if (checkPermission(to.path)) {
            // console.log(to);
            document.title = to.meta.title
            // 有权限
            next(to)
        } else {
            // 没有权限
            next('/404')
        }
    }
})

export default router